<form [formGroup]="dataForm" (submit)="next()" >
    <div class="grid-y grid-margin-y" style="padding-top: 2em">
        <div class="cell shrink align-self-middle"><h3>Data Transfer Project Demo</h3></div>
        <div class="cell align-self-middle">
            <progress-component></progress-component>
        </div>
        <div class="cell shrink">
            <div class="grid-x grid-margin-x" style="padding-top: 2em">
                <div class="cell small-4 small-offset-4 text-center">
                    <h5 style="padding-bottom: 1em">Select a data type to transfer</h5>
                    <select id="dataType" #dataType title="Transfer data type" [formControlName]="'dataType'">
                        <option *ngFor="let dataType of dataTypes" [value]="dataType">{{ dataType | titlecase }}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="cell align-self-middle" style="padding-top: 1em;">
            <input type="submit" class="button" value="Next: Select Services" tabindex="1">
        </div>
        <div class="cell align-self-middle">
            <a (click)="reset()" tabindex="2">Reset Demo</a>
        </div>
    </div>
</form>


